<template>
	<view>
		<!-- 导航栏 -->
		<view class="Content-Collaboration-Navigation-Bar">
			<!-- 返回图标 -->
			<i class="Content-Collaboration-Navigation-Bar-icon" @click="goBack"></i>
			<!-- 导航栏标题与右侧内容背景盒子 -->
			<view class="Content-Collaboration-Navigation-Bar-box">
				<!-- 导航栏标题 -->
				<text class="Content-Collaboration-Navigation-Bar-txt">内容合作收益详情</text>
				<!-- 导航栏右侧内容 -->
				<text class="Content-Collaboration-Navigation-Bar-rule">结算规则</text>
			</view>

		</view>
		<!-- 滚动通知 -->
		<view v-if="showNoticeBar" class="custom-notice-bar-background">
			<i class="custom-notice-bar-icon"></i>
			<u-notice-bar :text="text1" bgColor="#f6f6f6" fontSize="25rpx" icon="" class="custom-notice-bar"
				color="black">
			</u-notice-bar>
			<i class="custom-notice-bar-icon-02" @click="closeNoticeBar"></i>
		</view>
		<!-- 内容合作收益背景 -->
		<view class="Cooperation-benefits-background">

		</view>
		<!-- 仙人掌背景 -->
		<view class="Background-icon-box">
			<i class="Background-icon"></i>
			<text class="Background-icon-tix">暂时没有现金收益可以提取哦~</text>
		</view>
		<!-- 底部提现盒子 -->
		<view class="bottom-box">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				showNoticeBar: true
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			closeNoticeBar() {
				this.showNoticeBar = false;
			}
		}
	}
</script>

<style>
	/* 导航栏样式 */
	.Content-Collaboration-Navigation-Bar {
		width: 100%;
		height: 130rpx;
		position: sticky;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 返回图标样式 */
	.Content-Collaboration-Navigation-Bar-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		background-image: url("../../static/Myimg/return.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* 导航栏标题样式 */
	.Content-Collaboration-Navigation-Bar-txt {
		font-size: 38rpx;
		letter-spacing: 6rpx;
		margin: auto;
	}

	/* 导航栏右侧内容样式 */
	.Content-Collaboration-Navigation-Bar-rule {
		font-size: 30rpx;
		letter-spacing: 5rpx;
		color: grey;
		margin-right: 15rpx;
	}

	/* 导航栏标题与右侧内容背景盒子样式 */
	.Content-Collaboration-Navigation-Bar-box {
		width: 600rpx;
		height: 130rpx;
		/* background-color: chartreuse; */
		display: flex;
		align-items: center;
	}

	/* 滚动通知文字中间文字样式 */
	.custom-notice-bar {
		line-height: 60rpx;
		height: 60rpx;
		padding: 0;
	}

	/* 滚动通知背景样式 */
	.custom-notice-bar-background {
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	/* 滚动通知左侧图标 */
	.custom-notice-bar-icon,
	.custom-notice-bar-icon-02 {
		display: block;
		width: 60rpx;
		height: 60rpx;
		background-image: url("../../static/Myimg/Notice.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* 滚动通知右侧关闭图标 */
	.custom-notice-bar-icon-02 {
		background-image: url("../../static/icon/close.png");
	}

	/* 内容合作收益背景样式 */
	.Cooperation-benefits-background {
		width: 700rpx;
		height: 250rpx;
		background-color: #ff2442;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	/* 仙人掌图标背景盒子 */
	.Background-icon-box {
		width: 500rpx;
		height: 300rpx;
		/* background-color: aqua; */
		margin: 340rpx auto;
	}

	/* 仙人掌背景样式 */
	.Background-icon {
		display: block;
		width: 120rpx;
		height: 120rpx;
		/* background-color: #ff2442; */
		margin: auto;
		background-image: url("../../static/icon/cactus.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	/* 仙人掌文字样式 */
	.Background-icon-tix {
		display: block;
		text-align: center;
		margin-top: 26rpx;
		font-size: 25rpx;
		color: #e6e6e6;
		letter-spacing: 6rpx;
	}

	/* 底部提现盒子 */
	.bottom-box {
		width: 100%;
		height: 180rpx;
		/* 		background-color: #ff2442; */
		border-top: 1rpx solid gray;
	}
</style>